<template>
  <div style="height: 568px">
    <div class="flex-row-start-start">
      <div style="width: 90%" class="flex-row-start-center">
        <Select
          v-model="eventType"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="事故类型"
          size="large"
          clearable
        >
          <Option v-for="item in eventTypeList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <DatePicker
          style="width: calc(12.34% - 10px); margin-right: 10px"
          type="date"
          v-model="findTime"
          placeholder="请选择日期"
          size="large"
          @onChange="changeFindTime"
          clearable
        ></DatePicker>
        <Select
          v-model="kqName"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="请选择库区名称"
          size="large"
        >
          <Option v-for="item in kqNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <Select
          v-model="jzId"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="请选择井组编号"
          size="large"
        >
          <Option v-for="item in jzIdList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        
        <Select
          v-model="jzName"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="请选择井组名称"
          size="large"
        >
          <Option v-for="item in jzNameList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
        <Select
          v-model="dealSection"
          style="width: calc(12.34% - 10px); margin-right: 10px"
          placeholder="请选择处理状态"
          size="large"
        >
          <Option v-for="item in dealSectionList" :key="item" :value="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div style="width: 10%" class="flex-row-end-center">
        <Button
          type="error"
          style="width: 60px; text-align: center"
          @click="onQuery"
          >查询</Button
        >
      </div>
    </div>
    <div style="margin-top: 20px">
      <Table :columns="columns" :data="tableData"></Table>
      <div
        class="flex-row-end-center"
        style="margin-top: 10px"
        v-if="totalLen > 10"
      >
        <Page
          :current="curPage"
          :total="totalLen"
          :page-size="pageSize"
          show-total
          @on-change="changepage"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      eventTypeList: ["泄漏", "连通性", "环库泄漏","井口泄漏"],
      eventType: "",
      kqName: "",
      kqNameList: [],
      jzName: "",
      jzNameList: [],
      jzIdList: [],
      jzId: "",
      dealSection: "",
      findTime: "",
      dealSectionList: ["未处理", "已处理", "正在处理"],
      columns: [
        { title: "事故类型", key: "event_type" },
        { title: "检测时间", key: "findTime" },
        { title: "库区名称", key: "kqName" },
        { title: "井组编号", key: "jzId" },
        { title: "井组名称", key: "jzName" },
        { title: "处理情况", key: "dealSection" },
        { title: "事故定位", key: "eventPos" },
        {title:'示踪剂数值',key:'jcValue'},
        { title: "数据更新时间", key: "updateTime" },
      ],
      tableData: [],
      pageSize: 10,
      curPage: 0,
    };
  },
  props: {
    jcEventInfoList: Array,
    curJz: String,
    totalLen: Number,
  },
  watch: {
    jcEventInfoList(val) {
      this.tableData = val.slice(0, this.pageSize);
      this.kqNameList = [];
      let it = this;
      val.forEach((item) => {
        if (it.kqNameList.indexOf(item.kqName) < 0) {
          it.kqNameList.push(item.kqName);
        }
        if (it.jzIdList.indexOf(item.jzId) < 0) {
          it.jzIdList.push(item.jzId);
        }
        if (it.jzNameList.indexOf(item.jzName) < 0) {
          it.jzNameList.push(item.jzId);
        }
      });
      it.jzIdList.forEach((item) => {
        if (item.indexOf(it.curJz) > -1) {
          it.jzId = item;
        }
      });
      // it.query();
    },
  },
  methods: {
    changeFindTime(val) {
      this.findTime = val;
    },
    changepage(index) {
      let it = this;
      let o = {};
      this.curPage = index;
      if (it.eventType == "" || it.eventType == undefined) {
        it.eventType = "";
      }
      if (it.findTime == "" || it.findTime == undefined) {
        it.findTime = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.dealSection == "" || it.dealSection == undefined) {
        it.dealSection = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      o.eventType = it.eventType;
      o.findTime = it.findTime;
      o.kqName = it.kqName;
      o.dealSection = it.dealSection;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.page = index - 1;
      this.$emit("change-to-page", o);
    },
    onQuery() {
      let it = this;
      let o = {};
      if (it.eventType == "" || it.eventType == undefined) {
        it.eventType = "";
      }
      if (it.findTime == "" || it.findTime == undefined) {
        it.findTime = "";
      }
      if (it.kqName == "" || it.kqName == undefined) {
        it.kqName = "";
      }
      if (it.dealSection == "" || it.dealSection == undefined) {
        it.dealSection = "";
      }
      if (it.jzId == "" || it.jzId == undefined) {
        it.jzId = "";
      }
      if (it.jzName == "" || it.jzName == undefined) {
        it.jzName = "";
      }
      o.eventType = it.eventType;
      o.findTime = it.findTime;
      o.kqName = it.kqName;
      o.dealSection = it.dealSection;
      o.jzId = it.jzId;
      o.jzName = it.jzName;
      o.page = 0;
      this.$emit("change-to-page", o);
    },
    query() {
      let data = [];
      let it = this;
      if (
        !(
          (it.eventType == "" || it.eventType == undefined) &&
          (it.findTime == "" || it.findTime == undefined) &&
          (it.kqName == "" || it.kqName == undefined) &&
          (it.dealSection == "" || it.dealSection == undefined) &&
          (it.jzId == "" || it.jzId == undefined) &&
          (it.jzName == "" || it.jzName == undefined)
        )
      ) {
        data = this.jcEventInfoList.filter(function (item) {
          return (
            (it.kqName != "" ? item.kqName == it.kqName : true) &&
            (it.dealSection != ""
              ? item.dealSection == it.dealSection
              : true) &&
            (it.eventType != "" ? item.event_type == it.eventType : true) &&
            (it.findTime != "" ? item.findTime == it.findTime : true) &&
            (it.jzid != "" ? item.jzId == it.jzId : true)
          );
        });
        this.tableData = data.slice(0, this.pageSize);
      } else {
        this.tableData = this.jcEventInfoList.slice(0, this.pageSize);
      }
    },
  },
};
</script>
<style scoped>
</style>